<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-02 13:22:10
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-06-08 15:13:02
 * @FilePath: /smart-web-app/pages/contact/[id].vue
 * @Description: 
-->
<template>
  <div>
    <div class="top-img">
      <img src="~/assets/image/contact-top.jpg" alt="" />
    </div>
    <div class="breadcrumb-box">
      <div class="container">
        {{ $t("nav.home.name") }} > {{ $t("nav.contact.name") }}
      </div>
    </div>
    <div class="container pt20 pb20">
      <page-layout
        v-model="navId"
        :title="$t('nav.contact.name')"
        :list="navList"
      >
        <template #content>
          <job v-if="navId === '3'"></job>
          <div v-html="getContent(navId)" v-else></div>
        </template>
      </page-layout>
    </div>
  </div>
</template>

<script setup lang="ts">
const { locale } = useI18n();
const route = useRoute();
const navId = ref<any>("");
const navList = ref([
  {
    id: "1",
    title: "nav.contact.child.item1",
    content: {
      zh: `<p>地址：重庆市xxxxxxxxxxxxxx</p>
        <p>邮编：xxxxxxxxxx</p>
        <p>电话：xxx-xxxxxxxx</p>`,
      en: `<p>Address：重庆市xxxxxxxxxxxxxx</p>
        <p>Zip code：xxxxxxxxxx</p>
        <p>Tel：xxx-xxxxxxxx</p>`,
    },
  },
  {
    id: "2",
    title: "nav.contact.child.item2",
    content: {
      zh: `
          <p>公司关注每一位员工的现在及未来。在充满前景的硬科技行业前沿，在公司战略带领下，我们致力为每一位人才提供广阔而充满挑战的事业平台，畅通的职业发展通道。<p/>
          <p>多样化的学习和成长机会，让员工在工作中不断历练提升，释放潜能与活力，在公司共同进步，勇攀世界科技高峰。</p>
         `,
      en: `
          <p>We concern about the present and future of every employee. At the forefront of the promising hard technology industry and under the leadership of the group strategy, we are committed to providing a broad and challenging career platform and smooth career development channel for every talent. Diversified learning and growth opportunities allow employees to continuously experience and improve in work, release potential and vitality, make progress with the company, and bravely climb the world technology peak.<p/>
         `,
    },
  },
  {
    id: "3",
    title: "nav.contact.child.item3",
    content: {
      zh: `
          <p>职能类:法务、财务、人力资源、知识产权</p>
          <p>运营类:海关、采购、物流、信息工程</p>
          <p>研发类/制造类:工业工程、生产计划、厂务、产品与器件、扩散、薄膜、光刻、刻蚀、图像增强、集成整合</p>
          <p style="color:#735ba0;margin-top:30px;">应聘简历请发至:recruitment _cq@chipuni.com.cn</p>`,
      en: `
          <p>职能类:法务、财务、人力资源、知识产权</p>
          <p>运营类:海关、采购、物流、信息工程</p>
          <p>研发类/制造类:工业工程、生产计划、厂务、产品与器件、扩散、薄膜、光刻、刻蚀、图像增强、集成整合</p>
          <p style="color:#735ba0;margin-top:30px;">应聘简历请发至:recruitment _cq@chipuni.com.cn</p>`,
    },
  },
]);
navId.value = route.params?.id ?? "";

const getContent = (id: string) => {
  return (
    navList.value.find((item) => item.id === id)?.content[locale.value] ?? ""
  );
};
</script>
<style scoped lang="scss">
.top-img {
  font-size: 0;
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}
.breadcrumb-box {
  background-color: #eeeeee;
  .container {
    padding: 20px 0;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
